<template>
    <div>
        <div style="text-align:center">
            <el-upload
            action="http://localhost:8888/recognition/ingredient"
            list-type="picture-card"
            :on-success="successHandler">
                <i class="el-icon-plus"></i>
            </el-upload>
        </div>
        <div>
            <h2>识别结果</h2>
            {{resp}}
            <div class="container">
                <el-table
                :data="resp"
                stripe
                style="width: 100%"
                :row-class-name="tableRowClassName">
                    <el-table-column
                    align=center
                    prop="score"
                    label="准确率">
                    </el-table-column>
                    <el-table-column
                    align=center
                    prop="name"
                    label="关键字">
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            resp:[]
        }
    },
    methods: {
        successHandler(resp){
            this.resp=resp.result;
        },
         // 属性来为 Table 中的某一行添加 class
        tableRowClassName({row, rowIndex}) {
            if (rowIndex%2 === 0) {
            return 'warning';
            } else if (rowIndex%2 === 1) {
            return 'success';
            }
            return '';
        },
    },
    created () {
        
    }
    
}
</script>


<style lang="scss" >
.container{
    display: grid;
    grid-template-columns: 8% 84% 8%;
    // background: #2dc888;
}
.el-table{
    grid-column-start: 2;
    grid-column-end: 3;
}
h2{
    width: 200px;
    margin-left: 8%;
    color: #2dc888
}
.el-table .success{
    background: #d0f5f1 !important;
}
.el-table .warning{
    background: #d2eef3 !important;
  }
</style>


